<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input type="text" placeholder="请输入搜索内容" />
    </view>

    <!-- 文字讲解模块 -->
    <view class="text-section">
      <view class="section-header">
        <text class="icon">&#xe600;</text> <!-- 这里替换为实际图标代码，可通过iconfont引入 -->
        <text>文字讲解</text>
      </view>
      <view class="function-btns">
        <view class="btn">
          <text class="icon chat-icon">&#xe611;</text> <!-- 聊天图标 -->
        </view>
        <view class="btn">
          <text class="icon penguin-icon">&#xe622;</text> <!-- 企鹅图标 -->
        </view>
        <view class="btn">
          <text class="icon taobao-icon">&#xe633;</text> <!-- 淘宝图标 -->
        </view>
      </view>
    </view>

    <!-- 视频讲解模块 -->
    <view class="video-section">
      <view class="section-header">
        <text class="icon picture-icon">&#xe644;</text> <!-- 图片图标 -->
        <text>视频讲解</text>
      </view>
      <view class="video-item">
        <text class="icon weibo-icon">&#xe655;</text> <!-- 微博图标 -->
        <text>微博使用教程</text>
      </view>
      <view class="video-item">
        <text class="icon map-icon">&#xe666;</text> <!-- 地图图标 -->
        <text>百度地图使用教程</text>
      </view>
      <view class="video-item">
        <text class="icon music-icon">&#xe677;</text> <!-- 音乐图标 -->
        <text>QQ音乐使用教程</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 数据可根据需求扩展
      };
    }
  };
</script>

<style scoped>
  .container {
    padding: 15rpx;
    background-color: #f5f5f5;
  }

  .search-bar {
    margin-bottom: 20rpx;
  }

  .search-bar input {
    padding: 15rpx;
    background-color: white;
    border-radius: 15rpx;
  }

  .text-section {
    margin-bottom: 20rpx;
    background-color: white;
    border-radius: 20rpx;
    padding: 20rpx;
  }

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15rpx;
    border-bottom: 1rpx solid #e0e0e0;
    padding-bottom: 10rpx;
  }

  .section-header .icon {
    font-size: 32rpx;
    margin-right: 10rpx;
  }

  .function-btns {
    display: flex;
    justify-content: space-between;
  }

  .btn {
    width: 80rpx;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .video-section {
    background-color: white;
    border-radius: 20rpx;
    padding: 20rpx;
  }

  .video-item {
    display: flex;
    align-items: center;
    padding: 15rpx 0;
    border-bottom: 1rpx solid #e0e0e0;
  }

  .video-item:last-child {
    border-bottom: none;
  }

  .video-item .icon {
    font-size: 32rpx;
    margin-right: 15rpx;
  }
</style>